<template>
  <div class="video-play-ptz-container">
    <div class="header">视频预览</div>
    <div class="video-box">
      <videoPlayer :vid="currentIndexCode" ref="videoRef"></videoPlayer>
    </div>
    <!-- <div class="point-info">
      <div class="name-info">
        <div class="name">近开里西门监控点</div>
        <div class="lineStatus">
          <div class="circle"></div>
          在线
        </div>
      </div>
      <div class="types">
        <div class="tip">出入口</div>
      </div>
    </div> -->
    <div class="speck-btn">
      <div v-if="!isTalking" @click="handleStartTalk">开始对讲</div>
      <div v-if="isTalking" @click="handleStopTalk">结束对讲</div>
    </div>
    <div class="panel-box">
      <div class="ptz">
        <ptz width="261" height="261" :did="currentIndexCode"></ptz>
      </div>
      <div class="zoomptz">
        <div
          class="zoombtn"
          @touchstart="handleTouchStart('ZOOM_IN')"
          @touchend="handleTouchEnd"
          @pointerup="handleTouchEnd"
        >
          <img src="@/assets/images/xgjd/zommout.png" />
        </div>
        <div
          class="zoombtn"
          @touchstart="handleTouchStart('ZOOM_OUT')"
          @touchend="handleTouchEnd"
          @pointerup="handleTouchEnd"
        >
          <img src="@/assets/images/xgjd/zoomin.png" />
        </div>
      </div>
    </div>
    <div class="list-yz-1" v-if="ylist.length > 0">
      <div
        class="listbtn"
        v-for="item in ylist"
        :key="item.value"
        :class="{ active: currentPoint === item.value }"
      >
        <span @click="setYzd(item)"> {{ item.label }}</span>
      </div>
    </div>
    <p class="tips">长按进行操作,松开停止操作</p>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import videoPlayer from "@/components/video/video.vue";
import ptz from "@/components/ptz.vue";
import { useRoute } from "vue-router";
import { handlecameracontrol } from "@/api/videoplan.js";
import { gettalkurl } from "@/api/event.js";
const route = useRoute();
let currentIndexCode = ref("1");
let timer = null;
const videoRef = ref(null);
const isTalking = ref(false); // 对讲状态，默认未开始
const ylist = ref([
  {
    label: "预置点1",
    value: "1",
  },
  {
    label: "预置点2",
    value: "2",
  },
  {
    label: "预置点3",
    value: "3",
  },
  {
    label: "预置点4",
    value: "4",
  },
]);
let currentPoint = ref(
  ylist.value.length > 0 ? ylist.value[0].value : ""
);

const handleTouchStart = (cmd) => {
  handlecameracontrol({
    action: 0,
    cameraId: currentIndexCode.value,
    command: cmd,
  });
  // timer = setTimeout(() => {
  //   handlecameracontrol({
  //     action: 0,
  //     cameraId: currentIndexCode.value,

  //     command: cmd,
  //   });
  // }, 30);
};
const handleTouchEnd = (e) => {
  e.preventDefault();
  setTimeout(() => {
    handlecameracontrol({
      action: 1,
      cameraId: currentIndexCode.value,
      command: "LEFT",
    });
  }, 30);
};
// 设置预支点位
const setYzd = (item) => {
  console.log("设置预置点位", item.value);
  currentPoint.value = item.value
  console.log("更新后的currentPoint.value:", currentPoint.value);
  // 调用云台控制接口跳转到指定预制点
  handlecameracontrol({
    action: 0,
    cameraIndexCode: currentIndexCode.value,
    command: "GOTO_PRESET",
    presetIndex: item.value,
  });
};
// 开始和关闭对讲
const handleStartTalk = async () => {
  console.log("开始对讲------------");
  if (!currentIndexCode.value) {
    console.error("设备ID为空，无法开始对讲");
    return;
  }
  try {
    // 调用新接口获取对讲URL
    const { data } = await gettalkurl({
      deviceId: currentIndexCode.value, // 传入设备ID
    });
    console.log("获取对讲地址成功", data);
    if (data?.url) {
      console.log("开始对讲");
      // 调用子组件的startTalk方法
      await videoRef.value.startTalk(data.url);
      isTalking.value = true;
    } else {
      console.error("未获取到有效的对讲地址");
    }
  } catch (e) {
    console.error("获取对讲地址失败", e);
    console.error("获取对讲地址失败，请重试");
  }
};

// 结束对讲
const handleStopTalk = () => {
  if (videoRef.value) {
    videoRef.value.stopTalk();
    isTalking.value = false;
  }
};

onMounted(() => {
  currentIndexCode.value = route.query.indexCode;
  console.log("初始currentPoint.value:", currentPoint.value);
});
</script>

<style lang="scss" scoped>
.video-play-ptz-container {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f4f6fa;
  .header {
    width: 100%;
    height: 100rpx;
    margin-top: 50rpx;
    background: #fff;
    text-align: center;
    line-height: 100rpx;
  }
  .video-box {
    margin-top: 28rpx;
    width: 100%;
    height: 434rpx;
    overflow: hidden;
    padding: 0 28rpx;
  }

  .point-info {
    width: calc(100% - 56rpx);
    margin: 0 auto;
    height: 134rpx;
    background: #fff;
    padding: 15rpx 38rpx;
    // padding: 0 28rpx;

    .name-info {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name {
        margin-top: 17rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 23rpx;
        color: #333333;
        line-height: 33rpx;
      }

      .lineStatus {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 23rpx;
        color: #39aa92;
        line-height: 33rpx;

        .circle {
          width: 17rpx;
          height: 17rpx;
          border-radius: 50%;
          background: #39aa92;
          margin-right: 10rpx;
        }
      }
    }

    .types {
      margin-top: 10rpx;
      display: flex;
      align-items: center;

      .tip {
        min-width: 81rpx;
        height: 38rpx;
        background: #d2f0ff;
        border-radius: 8rpx;
        text-align: center;
        padding: 0 17rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 23rpx;
        color: #45aff7;
        line-height: 38rpx;
      }
    }
  }
  .speck-btn {
    margin: 0 28rpx;
    background: #fff;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    div {
      width: 331px;
      height: 46px;
      line-height: 46px;
      text-align: center;
      background: #0089e9;
      border-radius: 6px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #ffffff;
      letter-spacing: 1px;
      font-style: normal;
    }
  }
  .panel-box {
    margin-top: 26rpx;
    display: flex;
    align-items: top;
    padding: 0 28rpx;

    .ptz {
      padding: 38rpx 98rpx 36rpx 84rpx;
      width: 444rpx;
      height: 337rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
      margin-right: 19rpx;
    }
    .zoomptz {
      width: 229rpx;
      height: 337rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding-left: 90rpx;
      .zoombtn {
        width: 76rpx;
        height: 76rpx;
        background: #e4effd;
        border-radius: 15rpx;
        border: 2rpx solid #c3dcff;
        padding: 17rpx;
        image {
          width: 42rpx;
          height: 42rpx;
        }
      }
    }
  }
  .list-yz-1 {
    background: #ffffff !important;
    box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
    height: 175px;
    width: auto;
    // overflow: auto;
    overflow-y: auto;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 28rpx;
    padding: 0 28rpx;

    .listbtn {
      width: calc(33.33% - 7px);
      height: 40px;
      line-height: 40px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      text-align: center;
      background: #e4effd;
      box-sizing: border-box; /* 确保padding和border不影响宽度计算 */
    }

    .active {
      background: #0089e9 !important;
      font-size: 14px !important;
      color: #ffffff !important;
    }
  }

  .tips {
    text-align: center;
    opacity: 0.5;
    margin-top: 50rpx;
  }
}
</style>
